<template>
    <div v-if="resource.id" class="description-wrapper">
        <!-- <div>基本信息</div> -->
        <el-divider content-position="left">基本信息</el-divider>
        <el-form :model="resource" ref="form" label-width="68px">
            <!-- 标识码 -->
            <el-form-item label="标识码" v-if="resource.isFolder">
                <el-text class="label"> {{ resource.id }}</el-text>
                <el-button class="action" type="primary" icon="DocumentCopy" link v-copyText="resource.id"
                    v-copyText:callback="onCopy" />
            </el-form-item>
            <!-- 名称 -->
            <el-form-item label="名称">
                <el-text class="label"> {{ resource.name }} </el-text>
                <!-- <el-button class="action" type="primary" icon="edit" link /> -->
            </el-form-item>
            <!-- 类型 -->
            <el-form-item label="类型">
                <el-text>{{ resource.type }} ({{ resource.subTypeName }})</el-text>
            </el-form-item>
            <!-- 大小 -->
            <el-form-item label="大小" v-if="!resource.isFolder">
                <el-text> {{ resource.size < 1024 * 1024 ? (resource.size / 1024).toFixed(2) + ' KB' : (resource.size /
                    (1024 * 1024)).toFixed(2) + ' MB' }} </el-text>
            </el-form-item>

            <!-- 物理地址 -->
            <el-form-item label="物理地址" v-if="!resource.isFolder">
                <el-text class="label">{{ resource.physicalPath }}</el-text>
            </el-form-item>
            <!-- 网络地址 -->
            <el-form-item label="网络地址" v-if="!resource.isFolder">
                <el-text class="label">{{ resource.url }}</el-text>
                <el-button class="action" type="primary" icon="DocumentCopy" link v-copyText="resource.url"
                    v-copyText:callback="onCopy" />
            </el-form-item>
            <!-- 创建人 -->
            <el-form-item label="创建人">
                <el-text>{{ resource.createdByName }}</el-text>
            </el-form-item>
            <!-- 创建时间 -->
            <el-form-item label="创建时间">
                <el-text>{{ parseTime(resource.createdAt) }}</el-text>
            </el-form-item>
            <!-- 修改时间 -->
            <el-form-item label="修改时间">
                <el-text>{{ parseTime(resource.updatedAt) }}</el-text>
            </el-form-item>
        </el-form>
    </div>
    <div v-else class="no-description">没有预览</div>
</template>



<script setup>
const { proxy } = getCurrentInstance()
const props = defineProps({
    resource: {
        type: Object,
        default: {
            createdByName: "",
            isFolder: "",
            id: undefined,
            name: "",
            type: "",
            createdAt: "",
            updatedAt: "",
        }
    },
});


const onCopy = () => {
    proxy.$modal.msgSuccess("已复制到剪切板");
}
</script>

<style lang='scss' scoped>
.no-description {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--el-text-color-primary);
    background-color: var(--el-border-color-extra-light);
}

.description-wrapper {

    height: 100%;
    padding: 5px 20px;
    background-color: var(--el-border-color-extra-light);
    color: var(--el-text-color-primary);

    :deep(.el-divider__text) {
        background-color: unset;
    }

    .el-form-item {
        margin-bottom: 0;

        .el-form-item__content {
            .label {
                flex: 1;
                word-break: break-all;
            }

            .action {
                align-self: self-end;
            }
        }
    }
}
</style>